<template>
  <ContentContainer :show-footer="false" inner>
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      class="w-100!">
      <a-form-item
        label="文件缓存路径"
        field="cache_path"
        asterisk-position="end"
        class="path-item"
        hide-asterisk>
        <template #label>
          <div class="flex gap-x-1 items-center">
            <span>文件缓存路径</span>
            <a-tooltip :content-style="{ 'max-width': '509px' }">
              <i-icons-question class="question-icon" />
              <template #content>
                <div v-for="(item, index) in cacheRulePathText" :key="index">
                  {{ index + 1 }}.{{ item }}
                </div>
              </template>
            </a-tooltip>
          </div>
        </template>
        <a-input
          v-model="formState.cache_path"
          placeholder="请输入文件缓存路径"></a-input>
      </a-form-item>
      <a-form-item
        label="磁盘空间"
        field="cache_size"
        asterisk-position="end"
        validate-trigger="blur"
        hide-asterisk>
        <a-input-number
          v-model="formState.cache_size"
          :controls="true"
          :precision="0"
          :max-length="13"
          class="cloud-input-number"
          placeholder="请输入磁盘空间">
          <template #append>
            <a-select
              v-model="unit"
              :options="diskOptions"
              class="bg-transparent! border-none! rounded-tl-none rounded-bl-none!"></a-select>
          </template>
        </a-input-number>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="save">保存配置</a-button>
      </a-form-item>
    </a-form>
  </ContentContainer>
</template>
<script lang="ts" setup>
import { getApiNodeApi, updateApiNodeApi } from '@/apis/modules/node'
import { diskOptions } from '@/constants'
import type { FieldRule, FormInstance } from '@arco-design/web-vue'

const route = useRoute()

const formState = reactive({
  cache_path: '',
  cache_size: 0
})
const formRef = ref<FormInstance>()
const nodeId = computed(() => route.params.id as string)
const rules = computed<Record<string, FieldRule>>(() => {
  return {
    cache_path: {
      required: true,
      validator(value, callback) {
        const reg = /^\/(?:[^/]+(\/)?)*$/
        if (!value) {
          return callback('路径不能为空')
        }
        if (!reg.test(value)) {
          return callback('路径格式不正确')
        }
        callback()
      }
    },
    cache_size: cacheSizeRule(unit.value)
  }
})

const unit = ref(2)
const getNodeInfo = () => {
  // 获取节点信息
  getApiNodeApi({ id: nodeId.value }).then((res) => {
    formState.cache_path = res.cache_path ?? ''
    const size = res.cache_size ?? '0GB'
    const { value, unit: symbol } = separateNumberAndLetter(size)
    formState.cache_size = Number(value)
    const index = diskOptions.find((item) => item.label === symbol)
      ?.value as number
    unit.value = index ?? 2
  })
}
const save = async () => {
  const error = await formRef.value?.validate()
  if (error) return
  const symbol = diskOptions.find((item) => item.value === unit.value)?.label
  const data = {
    id: nodeId.value,
    cache_path: formState.cache_path,
    cache_size: `${formState.cache_size}${symbol}`
  }
  updateApiNodeApi(data).then(() => {
    ToastUtils.success('保存成功')
    getNodeInfo()
  })
}
watchEffect(() => {
  getNodeInfo()
})
</script>
<style lang="less" scoped>
.arco-form {
  .path-item:deep(.arco-form-item-label) {
    display: flex;
    width: 100%;
    .arco-form-item-label-required-symbol {
      position: relative;
    }
  }
}
</style>
